<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>桃子同学的个人空间</title>
    <link rel="icon" href="/public/images/index/about/favicon.ico" >
    <link rel="stylesheet" href="/public/styles/base.css"/>
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/3.2.1/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/public/styles/admin/login.css"/>
    <link rel="stylesheet" href="/public/styles/admin/left-menu.css"/>
    <style>
        html,body{height: 100%;}
        .outer{height: 100%;}
        .content{margin-left: 70px;}
        .search-box{margin: 10px;text-align: center}
        .form-control{display: inline-block;width: 125px;vertical-align: middle}
    </style>
</head>
<body>
<div class="outer">
    <if condition="$loginStatus eq 0 ">
        <input type="hidden" value="{$URL_PREFIX}" id="urlPrefix"/>
        <include file="login"/>
    </if>
    <include file="left_menu"/>
    <div class="content">
        <div class="search-box">
            <select class="form-control" id="selectMonth">
                <for start="1" end="13">
                    <option>{$i}</option>
                </for>
            </select>
        </div>
        <div id="containerMonth"></div>
        <div id="containerRank"></div>
        <div class="search-box">
            <select class="form-control" id="selectEle">
                <foreach name="realms" item="vo" >
                    <option>{$vo.realm}</option>
                </foreach>
            </select>
        </div>
        <div id="container"></div>
    </div>
</div>
<script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="//cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script src="/public/scripts/base.js"></script>
<script src="/public/scripts/admin/login.js"></script>
<script src="/public/scripts/admin/left-menu.js"></script>
<script>
    //服务器月收益
    function searchByRealm(realm,year,month) {
        if(month < 10) month = '0' + month;
        $.ajax({
            url:'/{$URL_PREFIX}admin/wow/getstat'
            ,type:'get'
            ,data:{realm:realm,month: year + '-' + month }
            ,success:function (result) {
                var details = JSON.parse(result[0].details);
                var data = [];
                var categories = [];
                for(var i in details){
                    data.push(details[i] /10000 * 3.4);
                    categories.push(i + "日");
                }
                $('#container').highcharts({
                    title: {
                        text:  realm + month +'月收益走势',
                        x: -20 //center
                    },
                    subtitle: {
                        text: '本月总收益：'+ (result[0].total) / 10000 * 3.4 +'元',
                        x: -20
                    },
                    xAxis: {
                        categories: categories
                    },
                    yAxis: {
                        title: {
                            text: '收益（元）'
                        },
                        plotLines: [{
                            value: 0,
                            width: 1,
                            color: '#808080'
                        }]
                    },
                    tooltip: {
                        valueSuffix: '元'
                    },
                    legend: {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'middle',
                        borderWidth: 0
                    },
                    series: [{
                        name: realm,
                        data: data
                    }]
                });
            }
        })
    }
    //月收益概览
    function getTotalProfit(year,month){
        //获取当月总天数
        var temp = new Date(year,month,0);
        if(month < 10) month = '0' + month;
        var monthEnd = temp.getDate();
        var categories = [];
        $.ajax({
            url:'/{$URL_PREFIX}admin/wow/getstat'
            ,type:'get'
            ,data:{realm:'',month: year + '-' + month }
            ,success:function (resultArray) {
                var resultLength = resultArray.length;
                var dataArray = [];
                var totalMoney = 0;
                for(var i = 1;i <= monthEnd;i++){
                    categories.push(i);
                    var dataItem=0;
                    for(var j = 0;j<resultLength;j++){
                        if(i == 1) totalMoney += Number(resultArray[j].total);
                        var details = JSON.parse(resultArray[j].details);
                        for(var k in details){
                            if(k == i){
                                dataItem += details[k];
                                break;
                            }
                        }
                    }
                    dataArray.push(dataItem / 10000 *3.4);
                }
                //月收益折线图
                $('#containerMonth').highcharts({
                    title: {
                        text:  month + '月收益走势',
                        x: -20 //center
                    },
                    subtitle: {
                        text: '本月总收益：'+ totalMoney / 10000 * 3.4 +'元',
                        x: -20
                    },
                    xAxis: {
                        categories: categories
                    },
                    yAxis: {
                        title: {
                            text: '收益（元）'
                        },
                        plotLines: [{
                            value: 0,
                            width: 1,
                            color: '#808080'
                        }]
                    },
                    tooltip: {
                        valueSuffix: '元'
                    },
                    legend: {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'middle',
                        borderWidth: 0
                    },
                    series: [{
                        name: '收益',
                        data: dataArray
                    }]
                });
                resultArray.sort(function(a,b){
                    return Number(a.total) - Number(b.total);
                });
                var realmName=[];
                var realmMoney=[];
                for(var a = 0 ; a < resultLength; a++){
                    realmName.push(resultArray[a].realm);
                    realmMoney.push(Number(resultArray[a].total) / 10000 * 3.4);
                }
                //服务月收益排行
                $('#containerRank').highcharts({
                    chart: {
                        type: 'column'
                    },
                    title: {
                        text: ''
                    },
                    subtitle: {
                        text: '本月服务器收益排行'
                    },
                    tooltip: {
                        valueSuffix: '元'
                    },
                    xAxis: {
                        categories: realmName
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: '收益（元）'
                        }
                    },
                    plotOptions: {
                        column: {
                            pointPadding: 0.2,
                            borderWidth: 0
                        }
                    },
                    series: [{
                        name: '收益',
                        data: realmMoney
                    }]
                });
            }
        })
    }
    //统一执行入口
    $(function(){
        //初始化
        var toMonth =(new Date().getMonth() + 1);
        $('#selectMonth').val(toMonth);
        getTotalProfit(new Date().getFullYear(),toMonth);
        $('#selectMonth').change(function () {
            var month = $(this).children('option:selected').val();
            getTotalProfit(new Date().getFullYear(),month);
        });
        $('#selectEle').change(function () {
            var realm = $(this).children('option:selected').val();
            searchByRealm(realm,new Date().getFullYear(),toMonth);
        });
    })
</script>
</body>
</html>